/* miniprogram/pages/servicePage/submitOrder/submitOrder.wxss */
@import "../../../app.less";

.container {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: rgba(248, 248, 249);
    padding: 40rpx;

    // 公共代码块
    .commond(@height:60rpx, @margin: 30rpx,@T:20rpx,@R:20rpx,@L:20rpx,@B:20rpx) {
        height: @height;
        border-radius: @T @R @B @L;
        padding: 20rpx 30rpx;
        background-color: #fff;
        display: flex;
        font-size: 24rpx;
        margin-bottom: @margin;
    }

    .goodsBox {
        .commond(100rpx);

        // 商品图片
        .goodsImg {
            width: 100rpx;
            height: 100rpx;
        }

        // 商品名称
        .goodsTitle {
            flex: 1;
            box-sizing: border-box;
            padding: 0 20rpx;
            font-size: 28rpx;
        }

        // 商品价格
        .priceBox {
            min-width: 80rpx;
            height: 100%;
            display: flex;
            flex-direction: column;
            text-align: right;
            font-size: 24rpx;

            .oldPrice {
                flex: 1;

            }

            .goodsNum {
                flex: 1;
                color: #999;
            }
        }
    }

    .title {
        display: flex;
        align-items: center;
    }
    .select {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-left: 20rpx;
        box-sizing: border-box;

        & .none,& .icon-arrow-right {
            height: 100%;
            display: flex;
            align-items: center;
            color: #999;
        }
        & .have{
            color: #333;
            text-align: left;
        }
    }
    

    // 服务地址
    .serviceAddress {
        .commond(@height:auto);
        .select{
            padding: 10rpx 0 10rpx 20rpx;
        }
    }
    // 优惠券红包
    .discount{
        // 优惠券
        .coupon{
            .commond(@margin:0rpx,@B:0,@L:0)
        }
        // 红包
        .red{
            .commond(@T:0,@R:0)
        }
    }
    // 备注
    .remarks{
        .commond(@height:auto);
        .select{
            padding: 10rpx 0 10rpx 20rpx;
            font-size: 20rpx;
        }
    }
    // 提交订单
    .fixed{
        position: fixed;
        bottom: 0;
        left: 0;
        height: 100rpx;
        width: 100vw;
        box-sizing: border-box;
        padding: 10rpx 30rpx;
        display: flex;
        background-color: #fff;
        .countBox{
            flex: 1;
            .countText{
                text{
                    color: #f00;
                }
            }
            .discountPrice{
                font-size: 20rpx;
                color: #ccc;
            }
        }
        .right{
            flex: 1;
            display: flex;
            align-items: center;
            button{
                border-radius: 50rpx;
                font-weight: normal;
            }
            .submit{
                background-color: rgb(21,169,252);
            }
            .unsubmit{
                background-color: #ccc;
            }
        }
    }
    // 蒙版
    .mask{
        position: absolute;
        left: 0;
        top:0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0,0,0,.4);
        z-index: 99;
        overflow: hidden;
        
    }
    .selectAddress{
        position: absolute;
        top: 100vh;
        left: 0;
        min-height: 50vh;
        width: 100vw;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        animation: move .5s forwards;
        z-index: 999;
        .notYet{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ccc;
            font-size: 24rpx;
        }
        .address{
            width: 100%;
            padding: 0rpx 30rpx;
            box-sizing: border-box;
            flex: 1;
            .detailedAddress{
                margin-top: 30rpx;
                display: flex;
                font-size: 24rpx;
                .left{
                    flex: 1;
                    .top{
                        .userName{
                            margin-right: 20rpx;
                        }
                        .phoneNumber{
                            color: #ccc;
                        }
                    }
                }
                .right{
                    width: 100rpx;
                    color: #999;
                    padding: 20rpx;
                    box-sizing: border-box;
                    border-left: 2px solid #eee;
                    .editbox{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }
                }
            }
        }
        // 新增地址
        .addAddress{
            height: 100rpx;
            padding: 10rpx 30rpx;
            box-sizing: border-box;
            .addBtn{
                width: 100%;
                height: 100%;
                font-weight: normal;
                background-color: rgb(21,169,252);
            }
        }
    }
}
@keyframes move{
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(-50vh);
    }
}